@charset "utf-8";
/*************头部样式修改****************/
header{
    background: rgba(0, 0, 0, .7);
    border-bottom: 2px solid rgba(0, 0, 0, .8);
    nav{
        ul{
            li{
                a{
                    color: #ffffff;
                }
            }
        }
    }  
}


section{
    /***************首屏*****************/
    .top{
        img{
            display: block;
            width: 100%;
        }
        .content{
            position: absolute;
            left: 367px;
            top: 269px;
            z-index: 11;
            width: 400px;
            p{
                color: #b2b2b2;
            }
            .detailtop{
                color: #7f7f7f;
            }
            .largedetail {
                color: #ffffff;
                font-weight: 500;
            }
        }
    }
    /*************六度营销**********/ 
    .sixdegress{
        width: 100%;
        height: 630px;
        background: url("../images/bluejSpread/sixdegress_02.jpg") no-repeat;
        .detail{
            position: relative;
            margin-left: 361px;
            padding-top: 103px;
            float: left;
            box-sizing: border-box;
            ul{
                li{
                    list-style: disc;
                    position: relative;
                    z-index: 10;
                    margin-bottom: 10px;
                    span{
                        position: relative;
                        display: inline-block;
                        height: 50px;
                        line-height: 50px;
                        list-style: disc;
                        padding: 0 40px;
                        font-size: 18px;
                        border-radius: 25px;
                        margin-left: -40px;
                        z-index: -1;
                        transition: all .3s ease;
                    }
                    
                    &:hover,&.active{
                        color: #ffffff; 
                        span{
                             background: #00324a;
                             color: #ffffff;
                        }
                    }
                }
            }
        }

        .image{
            width: 1056px;
            height: 100%;
            float: left;
            .box
            {
                position: relative;
                width: 945px;
                margin: 70px auto 0;
                transform: scale(0.8);
            }
            .lineF, .lineS ,.lineT
            {
                position: absolute;
                visibility: hidden;
            }
            .lineS
            {
                top: 182px;
                left: -105px;
            }
            .lineT
            {
                top: 364px;
                left: 0;
            }
            .boxF, .boxS, .boxT, .overlay
            {
                width: 200px;
                height: 250px;
                overflow: hidden;
            }
            .boxF, .boxS
            {
                visibility: hidden;
            }
            .boxF
            {
                transform: rotate(120deg);
                float: left;
                margin-left: 10px;
                -ms-transform: rotate(120deg);
                -moz-transform: rotate(120deg);
                -webkit-transform: rotate(120deg);
            }
            .boxS
            {
                transform: rotate(-60deg);
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
            }
            .boxT
            {
                transform: rotate(-60deg);
                background: no-repeat 50% center;
                background-size: 125% auto;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                visibility: visible;
            }
            .overlay
            {
                transition: all 250ms ease-in-out 0s;
                display: block;
                background: #b9bbbc;
                position: relative;
                background-size: 125% auto;
            }
            .bg{
                background: linear-gradient(to top left,#103343,#133547); 
            }
            .overlay.bg.active,.overlay.bg:hover
            {
                // background-color: rgba(0,0,0,0.6);
                background: url("../images/bluejSpread/sixbg_03.png") no-repeat 50% center;
                background-size: 125% auto;
            }
            .boxT:hover .overlay
            {
                display: block;
            }
            .overlay a
            {
                display: inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(50%,-50%);
                border-radius: 3px;
                text-align: center;
                line-height: 32px;
                width: 32px;
                height: 32px;
                text-decoration: none;
                color: White;
                font-size: 18px;
                font-weight: bolder;
            }
        }




    }


    /**********明星私服、网红资源、明星街拍**************/
    .corecompetence{
        width: 100%;
        height: 965px;
        background: #ffffff;
        .coreimg{
            margin-left: 360px;
            margin-top: 170px;
            img{
                display: block;
            }
        }

        .coredetail{
            margin-left: 142px;
            margin-top: 332px;
            .textwidth{
                width: 435px;
                line-height: 25px;
                margin-top: 70px;
                margin-bottom: 45px;
            }
        }
        .line{
            float: left;
            margin: 125px auto 0;
            margin-left: 50%;
            transform: translateX(-50%);
            width: 45%;
            height: 2px;
            background: #ebebeb;
        }
    }


    
     /**********明星私服、网红资源、明星街拍**************/
    .ipcooperation{
        width: 100%;
        height: 1000px;
        text-align: center;
        padding-top: 75px;
        box-sizing: border-box;
    } 
}

